<template>
  <baseCard :height="knowledgeHight"
            :title="'知识库建设'"
            :contentStyle="contentStyle"
            style="margin-right: 0; margin-left: 0; margin-bottom: 0.16rem">
    <div class="sm-data-echarts-layout">
      <div class="vpt-knowledge-total">
        <div class="title">
          {{ knowledgeTitle }}
        </div>
        <div class="count">
          {{ addThousandsSeparator(knowledgeCount)}}
        </div>
        <div class="knowledge-img"></div>
      </div>
    </div>
    <VptReviewBar class="bar-view"
                  v-bind="$attrs"></VptReviewBar>
  </baseCard>
</template>

<script setup>
import BaseCard from "@/components/vpt-cards-1001/index.vue";
import VptReviewBar from "./vpt-review-bar.vue";
import { addThousandsSeparator } from '@/utils/formatter.js';

const props = defineProps({
  knowledgeHight: {
    type: String, default: "10.3rem"
  },
  knowledgeTitle: {
    type: String, default: '知识总量',
  },
  knowledgeCount: {
    type: Number, default: 1507,
  },
});

const contentStyle = {
  paddingTop: 0,
};

</script>

<style lang="less" scoped>
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
  .vpt-knowledge-total {
    width: 1.04rem;
    height: 1.06rem;
    border: 1px solid #e6ebf5;
    // font-family: HarmonyOS_Sans_SC;
    font-weight: 500;
    background-image: url("../../../../assets/img/theme1/knowledge_total.png");

    .title {
      width: 0.56rem;
      height: 0.2rem;
      font-size: 0.14rem;
      color: #4e5969;
      letter-spacing: 0;
      line-height: 0.2rem;
      margin: 0.12rem 0 0 0.12rem;
    }

    .count {
      width: 0.42rem;
      height: 0.22rem;
      font-size: 0.18rem;
      color: #1d2129;
      line-height: 0.22rem;
      margin: 0.06rem 0 0 0.12rem;
    }

    .knowledge-img {
      width: 0.29rem;
      height: 0.4rem;
      opacity: 0.1;
      background-image: linear-gradient(180deg, #88b7ff 0%, #ffffff00 100%);
    }
  }
}
.test {
  width: 100px;
  height: 30px;
}
</style>